<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <style>
    * {
      margin: 0;
      padding: 0;
    }
  </style>
  <script src="../lib/three/three.js"></script>
  <script src="../lib/three/tween.min.js"></script>
</head>

<body>

</body>

</html>

<script>
  // 创建一个场景
  const scene = new THREE.Scene();

  // 创建一个相机 视点
  const camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 1, 1000);
  // 设置相机的位置
  camera.position.set(0, 0, 20);

  // 创建一个渲染器
  const renderer = new THREE.WebGLRenderer();
  // 设置渲染器尺寸
  renderer.setSize(window.innerWidth, window.innerHeight);

  document.body.appendChild(renderer.domElement);

  // 添加一个立方体
  // 定义了一个立方体的对象
  const cubeGeometry = new THREE.BoxGeometry(2, 2, 2);

  // 创建材质

  const lambert = new THREE.MeshLambertMaterial({ color: 0xff0000 })
  const basic = new THREE.MeshBasicMaterial({ wireframe: true })

  const cube = THREE.SceneUtils.createMultiMaterialObject(cubeGeometry, [
    lambert,
    basic
  ])
  cube.rotation.set(0.4, 0.4, 0)
  cube.position.x = -4;
  // 添加到场景里
  scene.add(cube);

  const sphereGeometry = new THREE.SphereGeometry(2, 10, 10);
  const sphere = THREE.SceneUtils.createMultiMaterialObject(sphereGeometry, [
    lambert,
    basic
  ])
  sphere.position.x = 4;
  scene.add(sphere);

  // 添加灯光
  const light = new THREE.PointLight(0xffffff);
  light.position.set(-10,10,90);
  scene.add(light);

  const animation = () => {
    TWEEN.update();
    // 渲染
    renderer.render(scene, camera);

    requestAnimationFrame(animation);
  }
  animation()
</script>